layui.use(['echarts'], function() {
	let echarts = layui.echarts;

	var line4 = echarts.init(document.getElementById('line4'));

	var xData = ['2022-07-27 17:09:23', '2022-07-27 17:09:23', '2022-07-27 17:09:23','2022-07-27 17:10:23','2022-07-27 17:10:23'];
	var yData1 = [ 1, 2, 3, 3, 5, 6, 5, 3, 6, 5, 5, 4];
	var yData2 = [9, 5,7,8,6,7,8,7,7,6,8,6];

	const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
	option = {
	    /*title: {
	        text: '用电量'
	    },*/
	    tooltip: {
	        trigger: 'axis'
	    },
	    /*legend: {
	        data: ['2018', '2019']
	    },*/
	    grid: {
	        top: '12%',
	        left: '3%',
	        right: '7%',
	        bottom: '3%',
	        containLabel: true
	    },
	    /*toolbox: {
	        feature: {
	            saveAsImage: {}
	        }
	    },*/
	    xAxis: {
			type: 'category',
		    boundaryGap: false,//坐标轴两边留白
			data: xData,
			axisLabel: { //坐标轴刻度标签的相关设置。
				interval: 0,//设置为 1，表示『隔一个标签显示一个标签』
			//	margin:15,
				textStyle: {
					color: '#1B253A',
					fontStyle: 'normal',
					fontFamily: '微软雅黑',
					fontSize: 12,
				},
				formatter:function(params) {
	                var newParamsName = "";
	                var paramsNameNumber = params.length;
                    params = params.substring(paramsNameNumber-8,paramsNameNumber-3);
	                var provideNumber = 5;  //一行显示几个字
	                var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
	                if (paramsNameNumber > provideNumber) {
	                    for (var p = 0; p < rowNumber; p++) {
	                        var tempStr = "";
	                        var start = p * provideNumber;
	                        var end = start + provideNumber;
	                        if (p == rowNumber - 1) {
	                            tempStr = params.substring(start, paramsNameNumber);
	                        } else {
	                            tempStr = params.substring(start, end) + "\n";
	                        }
	                        newParamsName += tempStr;
	                    }
	
	                } else {
	                    newParamsName = params;
	                }
	                return newParamsName
	            },
				//rotate:50,
			},
			axisTick:{//坐标轴刻度相关设置。
				show: false,
			},
			axisLine:{//坐标轴轴线相关设置
				lineStyle:{
					color:'#E5E9ED',
					// opacity:0.2
				}
			},
			splitLine: { //坐标轴在 grid 区域中的分隔线。
				show: true,
				lineStyle: {
					color: '#E5E9ED',
				// 	opacity:0.1
				}
			}
	    },
	    yAxis: [
			{
				type: 'value',
				splitNumber: 1,
				axisLabel: {
					textStyle: {
						color: '#a8aab0',
						fontStyle: 'normal',
						fontFamily: '微软雅黑',
						fontSize: 12,
					}
				},
				axisLine:{
					show: false
				},
				axisTick:{
					show: false
				},
				splitLine: {
					show: true,
					lineStyle: {
						color: '#E5E9ED',
					// 	opacity:0.1
					}
				}
	
			}
		],
	    series: [
	        {
	            name: '2018',
	            type: 'line',
	            itemStyle: {
			        normal: {
						color:'#3A84FF',
			            lineStyle: {
							color: "#3A84FF",
							width:1
			            },
			            areaStyle: { 
							color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
								offset: 0,
								color: 'rgba(58,132,255,0)'
							}, {
								offset: 1,
								color: 'rgba(58,132,255,0.35)'
							}]),
			            }
			        }
				},
	            data: yData1
	        },
	        {
	            name: '2019',
	            type: 'line',
	            itemStyle: {
			        normal: {
			            color:'rgba(255,80,124,1)',
			            lineStyle: {
							color: "rgba(255,80,124,1)",
							width:1
			            },
			            areaStyle: { 
							color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
								offset: 0,
								color: 'rgba(255,80,124,0)'
							}, {
								offset: 1,
								color: 'rgba(255,80,124,0.35)'
							}]),
			            }
			        }
				},
	            data: yData2
	        }
	    ]
	};


    setInterval(function () {
        for (var i = 0; i < 5; i++) {
            // xData = xData.shift()
            xData.shift();
            xData.push("2022-09-12 05:12:12");
            yData1.shift();
            yData1.push(10);
            yData2.shift();
            yData2.push(14);
        }
        line4.setOption({
            xAxis: {data: xData},
            series: [
                {
                    data: yData1
                },
                {
                    data: yData2
                }
            ]
        });
    }, 1000);

	line4.setOption(option);

	window.onresize = function() {
		line4.resize();
	}
})
